<template>
  <div>
    <div class="Assessment">
    <!-- <OneOfAssessment2 :things="things"/> -->
      <ul class="assessmentList">
        <TopOfAssessment :thing="top" />
        <OneOfAssessment
          v-for="(thing, index) in things"
          :key="index"
          :thing="thing"
        />
      </ul>
      <div class="bottom">
        <BottomOfAssessment :totalPages="totalPages" />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

import { serverAddress } from "../js/config";
import BottomOfAssessment from "../components2/BottomOfAssessment.vue";
import TopOfAssessment from "../components2/TopOfAssessment.vue";
import OneOfAssessment from "./OneOfAssessment.vue";
import OneOfAssessment2 from "../components2/OneOfAssessment.vue";

export default {
  name: "Assessment",
  components: { OneOfAssessment, TopOfAssessment, BottomOfAssessment,OneOfAssessment2 },
  created() {
    /* var url=`${serverAddress}/evaluation/rootLookPage/1`; */
    var url= "https://mock.apifox.com/m2/3662090-0-default/132899048?pageNo=1";
      if(sessionStorage.getItem('Identity')==='教师'){
      /* url=`${serverAddress}/evaluation/teacherLookPage?pageNo=1&teacherId=${sessionStorage.getItem("Id")}`; */
      url=`https://mock.apifox.com/m2/3662090-0-default/133274848?pageNo=1&teacherId=${sessionStorage.getItem("Id")}`
    }
    axios({
      url:url,
      method: "GET",
    })
      .then((response) => {
        console.log(response.data);
        this.things = response.data.data.evaluationBacks;
        this.totalPages = response.data.data.pageSum;
      })
      .catch((error) => {
        console.log("网络错误,无法获取信息");
      });
  },
  data() {
    return {
      totalPages: null,
      top: ["班级", "课程", "教师姓名", "已否评价"],
      things: null,
    };
  },
  methods: {
    gotoPage(page) {
      /* var api=`${serverAddress}/evaluation/rootLookPage?pageNo=${page}`; */
      var api= `https://mock.apifox.com/m2/3662090-0-default/132899048?pageNo=${page}`;
      if(sessionStorage.getItem('Identity')==='教师'){
        /* api=`${serverAddress}/evaluation/teacherLookPage?pageNo=1&teacherId=${sessionStorage.getItem("Id")}` */
        url=`https://mock.apifox.com/m2/3662090-0-default/133274848?pageNo=${page}&teacherId=${sessionStorage.getItem("Id")}`
      }
      axios({
        url:api,
        method: "GET",
      }).then((response) => {
          if (response.data.code === 1) {
            console.log(response.data);
            this.things = response.data.data.evaluationBacks;
            this.totalPages = response.data.data.pageSum;
          } else {
            console.log(response.data.msg);
          }
        }).catch((error) => {
          console.log("网络错误,无法获取信息");
        });
    },
  },
};
</script>

<style scoped>
/* 底部部分的样式 */
.bottom {
  width: 100%; /* 使用整个宽度 */
  max-width: 930px; /* 设置最大宽度 */
  margin: 30px auto; /* 水平居中并添加一些顶部边距 */
  position:absolute;
  left: 11%;
  top:76%;
}

/* 评估列表的样式 */
.assessmentList {
  list-style: none; /* 移除默认列表样式 */
  padding: 0; /* 移除默认内边距 */
  margin: 0; /* 移除默认外边距 */
}

/* 评估容器的样式 */
.Assessment {
  background-color: #f8f8f8; /* 浅色背景色 */
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
  width: 1060px; /* 使用整个宽度 */
  max-width: 1100px; /* 设置最大宽度 */
  margin: 30px auto; /* 水平居中并添加一些顶部边距 */
  padding: 20px; /* 添加一些内边距 */
  height: 540px;
}
</style>  